// یک تابع fetchData را تصور کنید که یک Promise برمی‌گرداند
function fetchUserData() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({ name: 'Alice' });
    }, 2000);
  });
}

// یک هوک فرضی واکشی داده با قابلیت Suspense
function useUserData() {
  const data = fetch(url);
  if (data.status === 'pending') {
    throw new Promise(resolve => {
      // این همان چیزی است که Suspense رهگیری می‌کند
      setTimeout(() => resolve(null), 2000); 
    });
  }
  return data.value;
}

function UserProfile() {
  const userData = useUserData(); // این فراخوانی ممکن است معلق شود
  return 
Welcome, {userData.name}!
;
}

function App() {
  return (
    Loading user...

۲. دسته‌بندی خودکار (Automatic Batching)

دسته‌بندی فرآیند گروه‌بندی چندین به‌روزرسانی حالت (state) در یک رندر مجدد است. به طور سنتی، ری‌اکت فقط به‌روزرسانی‌هایی را که در کنترل‌کننده‌های رویداد (event handlers) رخ می‌دادند، دسته‌بندی می‌کرد. به‌روزرسانی‌های آغاز شده خارج از کنترل‌کننده‌های رویداد (مثلاً در promiseها یا `setTimeout`) دسته‌بندی نمی‌شدند که منجر به رندرهای مجدد غیرضروری می‌شد.

چگونه با همزمانی کار می‌کند: با حالت همزمانی، ری‌اکت به طور خودکار تمام به‌روزرسانی‌های حالت را، صرف‌نظر از منشأ آن‌ها، دسته‌بندی می‌کند. این بدان معناست که اگر چندین به‌روزرسانی حالت به سرعت پشت سر هم اتفاق بیفتد (مثلاً از تکمیل چندین عملیات ناهمگام)، ری‌اکت آن‌ها را گروه‌بندی کرده و یک رندر مجدد واحد انجام می‌دهد، که عملکرد را بهبود بخشیده و سربار چرخه‌های رندرینگ متعدد را کاهش می‌دهد.

مثال: فرض کنید در حال واکشی داده از دو API مختلف هستید. پس از تکمیل هر دو، دو بخش جداگانه از حالت را به‌روز می‌کنید. در نسخه‌های قدیمی‌تر ری‌اکت، این ممکن بود دو رندر مجدد را راه‌اندازی کند. در حالت همزمانی، این به‌روزرسانی‌ها دسته‌بندی می‌شوند و منجر به یک رندر مجدد واحد و کارآمدتر می‌شوند.

۳. ترنزیشن‌ها (Transitions)

ترنزیشن‌ها یک مفهوم جدید هستند که برای تمایز بین به‌روزرسانی‌های فوری و غیرفوری معرفی شده‌اند. این یک مکانیزم اصلی برای فعال کردن رندرینگ قابل وقفه است.

به‌روزرسانی‌های فوری: این‌ها به‌روزرسانی‌هایی هستند که نیاز به بازخورد فوری دارند، مانند تایپ کردن در یک فیلد ورودی، کلیک کردن روی یک دکمه یا دستکاری مستقیم عناصر UI. آن‌ها باید فوری احساس شوند.

به‌روزرسانی‌های ترنزیشن: این‌ها به‌روزرسانی‌هایی هستند که می‌توانند بیشتر طول بکشند و نیازی به بازخورد فوری ندارند. مثال‌ها شامل رندر کردن یک صفحه جدید پس از کلیک روی یک لینک، فیلتر کردن یک لیست بزرگ، یا به‌روزرسانی عناصر UI مرتبطی است که مستقیماً به یک کلیک پاسخ نمی‌دهند. این به‌روزرسانی‌ها قابل وقفه هستند.

چگونه با همزمانی کار می‌کند: با استفاده از `startTransition` API، می‌توانید برخی از به‌روزرسانی‌های حالت را به عنوان ترنزیشن علامت‌گذاری کنید. زمان‌بند ری‌اکت سپس این به‌روزرسانی‌ها را با اولویت پایین‌تری در نظر می‌گیرد و در صورت وقوع یک به‌روزرسانی فوری‌تر، می‌تواند آن‌ها را قطع کند. این تضمین می‌کند که در حالی که یک به‌روزرسانی غیرفوری (مانند رندر یک لیست بزرگ) در حال انجام است، به‌روزرسانی‌های فوری (مانند تایپ در نوار جستجو) اولویت‌بندی شده و UI پاسخگو باقی می‌ماند.

مثال جهانی: یک وب‌سایت رزرو سفر را در نظر بگیرید. هنگامی که یک کاربر مقصد جدیدی را انتخاب می‌کند، ممکن است مجموعه‌ای از به‌روزرسانی‌ها را راه‌اندازی کند: واکشی داده‌های پرواز، به‌روزرسانی در دسترس بودن هتل‌ها و رندر نقشه. اگر کاربر بلافاصله تصمیم بگیرد تاریخ‌های سفر را در حالی که به‌روزرسانی‌های اولیه هنوز در حال پردازش هستند تغییر دهد، `startTransition` API به ری‌اکت اجازه می‌دهد تا به‌روزرسانی‌های پرواز/هتل را متوقف کرده، تغییر تاریخ فوری را پردازش کند و سپس به طور بالقوه واکشی پرواز/هتل را بر اساس تاریخ‌های جدید از سر بگیرد یا دوباره آغاز کند. این از یخ‌زدگی UI در طول توالی به‌روزرسانی پیچیده جلوگیری می‌کند.

قطعه کد (توضیحی):

import { useState, useTransition } from 'react';

function SearchResults() {
  const [isPending, startTransition] = useTransition();
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);

  const handleQueryChange = (e) => {
    const newQuery = e.target.value;
    setQuery(newQuery);

    // این به‌روزرسانی را به عنوان یک ترنزیشن علامت‌گذاری کنید
    startTransition(() => {
      // شبیه‌سازی واکشی نتایج، این می‌تواند قطع شود
      fetchResults(newQuery).then(res => setResults(res));
    });
  };

  return (
    

      
      {isPending && 
Loading results...
}
      

        {results.map(item => (
          
{item.name}
        ))}
      
    
  );
}

۴. یکپارچه‌سازی با کتابخانه‌ها و اکوسیستم

مزایای حالت همزمانی به ویژگی‌های اصلی ری‌اکت محدود نمی‌شود. کل اکوسیستم در حال تطبیق است. کتابخانه‌هایی که با ری‌اکت تعامل دارند، مانند راه‌حل‌های مسیریابی یا ابزارهای مدیریت حالت، نیز می‌توانند از همزمانی برای ارائه تجربه‌ای روان‌تر استفاده کنند.

مثال: یک کتابخانه مسیریابی می‌تواند از ترنزیشن‌ها برای پیمایش بین صفحات استفاده کند. اگر کاربر قبل از اینکه صفحه فعلی به طور کامل رندر شود، به صفحه دیگری برود، به‌روزرسانی مسیریابی می‌تواند به طور یکپارچه قطع یا لغو شود و پیمایش جدید اولویت پیدا کند. این تضمین می‌کند که کاربر همیشه به‌روزترین نمایی را که قصد داشته، می‌بیند.

چگونه ویژگی‌های همزمانی را فعال و استفاده کنیم

در حالی که حالت همزمانی یک تغییر بنیادی است، فعال کردن ویژگی‌های آن به طور کلی ساده است و اغلب شامل حداقل تغییرات کد می‌شود، به ویژه برای اپلیکیشن‌های جدید یا هنگام اتخاذ ویژگی‌هایی مانند ساسپنس و ترنزیشن‌ها.

۱. نسخه ری‌اکت

ویژگی‌های همزمانی در ری‌اکت ۱۸ و بالاتر در دسترس هستند. اطمینان حاصل کنید که از نسخه سازگار استفاده می‌کنید:

npm install react@latest react-dom@latest

۲. Root API (`createRoot`)

راه اصلی برای فعال کردن ویژگی‌های همزمانی، استفاده از `createRoot` API جدید هنگام سوار کردن (mount) اپلیکیشن شماست:

// index.js یا main.jsx
import ReactDOM from 'react-dom/client';
import App from './App';

const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render();

استفاده از `createRoot` به طور خودکار تمام ویژگی‌های همزمانی، از جمله دسته‌بندی خودکار، ترنزیشن‌ها و ساسپنس را فعال می‌کند.

نکته: `ReactDOM.render` API قدیمی از ویژگی‌های همزمانی پشتیبانی نمی‌کند. مهاجرت به `createRoot` یک گام کلیدی برای باز کردن قفل همزمانی است.

۳. پیاده‌سازی ساسپنس

همانطور که قبلاً نشان داده شد، ساسپنس با پیچیدن کامپوننت‌هایی که عملیات‌های ناهمگام انجام می‌دهند در یک مرز <Suspense> و ارائه یک پراپ fallback پیاده‌سازی می‌شود.

بهترین شیوه‌ها:

• مرزهای <Suspense> را به صورت تودرتو قرار دهید تا حالت‌های بارگذاری را به صورت جزئی مدیریت کنید.
• از هوک‌های سفارشی که با ساسپنس یکپارچه شده‌اند برای منطق واکشی داده تمیزتر استفاده کنید.
• استفاده از کتابخانه‌هایی مانند Relay یا Apollo Client را که پشتیبانی درجه یک از ساسپنس دارند، در نظر بگیرید.

۴. استفاده از ترنزیشن‌ها (`startTransition`)

به‌روزرسانی‌های غیرفوری UI را شناسایی کرده و آن‌ها را با startTransition بپوشانید.

چه زمانی استفاده کنیم:

• به‌روزرسانی نتایج جستجو پس از تایپ کاربر.
• پیمایش بین مسیرها.
• فیلتر کردن لیست‌ها یا جداول بزرگ.
• بارگذاری داده‌های اضافی که تأثیر فوری بر تعامل کاربر ندارند.

مثال: برای فیلتر کردن پیچیده یک مجموعه داده بزرگ که در یک جدول نمایش داده می‌شود، شما حالت کوئری فیلتر را تنظیم می‌کنید و سپس startTransition را برای فیلتر کردن واقعی و رندر مجدد ردیف‌های جدول فراخوانی می‌کنید. این تضمین می‌کند که اگر کاربر به سرعت معیارهای فیلتر را دوباره تغییر دهد، عملیات فیلتر قبلی می‌تواند به طور ایمن قطع شود.

مزایای رندرینگ قابل وقفه برای مخاطبان جهانی

مزایای رندرینگ قابل وقفه و حالت همزمانی هنگام در نظر گرفتن یک پایگاه کاربری جهانی با شرایط شبکه و قابلیت‌های دستگاهی متنوع، تقویت می‌شود.

• بهبود عملکرد درک‌شده: حتی در اتصالات کندتر یا دستگاه‌های کم‌قدرت‌تر، UI پاسخگو باقی می‌ماند. کاربران یک اپلیکیشن سریع‌تر را تجربه می‌کنند زیرا تعاملات حیاتی هرگز برای مدت طولانی مسدود نمی‌شوند.
• دسترسی‌پذیری پیشرفته: با اولویت‌بندی تعاملات کاربر، اپلیکیشن‌ها برای کاربرانی که به فناوری‌های کمکی متکی هستند یا ممکن است دارای اختلالات شناختی باشند که از یک رابط کاربری به طور مداوم پاسخگو بهره‌مند می‌شوند، دسترسی‌پذیرتر می‌شوند.
• کاهش ناامیدی: کاربران جهانی، که اغلب در مناطق زمانی مختلف و با تنظیمات فنی متفاوت کار می‌کنند، از اپلیکیشن‌هایی که یخ نمی‌زنند یا تأخیر ندارند، قدردانی می‌کنند. UX روان منجر به تعامل و رضایت بالاتر می‌شود.
• مدیریت بهتر منابع: در دستگاه‌های تلفن همراه یا سخت‌افزارهای قدیمی‌تر، جایی که CPU و حافظه اغلب محدود هستند، رندرینگ قابل وقفه به ری‌اکت اجازه می‌دهد تا منابع را به طور کارآمد مدیریت کند و وظایف غیرضروری را برای ایجاد فضا برای وظایف حیاتی متوقف کند.
• تجربه یکپارچه در تمام دستگاه‌ها: چه کاربر در سیلیکون ولی با یک دسکتاپ پیشرفته باشد یا در جنوب شرقی آسیا با یک گوشی هوشمند اقتصادی، پاسخگویی اصلی اپلیکیشن می‌تواند حفظ شود و شکاف بین قابلیت‌های سخت‌افزاری و شبکه را پر کند.

یک اپلیکیشن یادگیری زبان را در نظر بگیرید که توسط دانش‌آموزان در سراسر جهان استفاده می‌شود. اگر یک دانش‌آموز در حال دانلود یک درس جدید باشد (یک وظیفه بالقوه طولانی) در حالی که دیگری سعی در پاسخ به یک سؤال سریع واژگان دارد، رندرینگ قابل وقفه تضمین می‌کند که سؤال واژگان فوراً پاسخ داده می‌شود، حتی اگر دانلود در حال انجام باشد. این برای ابزارهای آموزشی که بازخورد فوری برای یادگیری حیاتی است، بسیار مهم است.

چالش‌ها و ملاحظات احتمالی

در حالی که حالت همزمانی مزایای قابل توجهی ارائه می‌دهد، اتخاذ آن همچنین شامل یک منحنی یادگیری و برخی ملاحظات است:

• اشکال‌زدایی (Debugging): اشکال‌زدایی عملیات‌های ناهمگام و قابل وقفه می‌تواند چالش‌برانگیزتر از اشکال‌زدایی کد همگام باشد. درک جریان اجرا و اینکه وظایف چه زمانی ممکن است متوقف یا از سر گرفته شوند، نیاز به توجه دقیق دارد.
• تغییر مدل ذهنی: توسعه‌دهندگان باید تفکر خود را از یک مدل اجرای کاملاً متوالی به یک رویکرد همزمان‌تر و رویدادمحورتر تغییر دهند. درک پیامدهای startTransition و ساسپنس کلیدی است.
• کتابخانه‌های خارجی: همه کتابخانه‌های شخص ثالث برای آگاهی از همزمانی به‌روز نشده‌اند. استفاده از کتابخانه‌های قدیمی‌تر که عملیات‌های مسدودکننده انجام می‌دهند ممکن است همچنان منجر به یخ‌زدگی UI شود. مهم است که اطمینان حاصل کنید وابستگی‌های شما سازگار هستند.
• مدیریت حالت: در حالی که ویژگی‌های همزمانی داخلی ری‌اکت قدرتمند هستند، سناریوهای مدیریت حالت پیچیده ممکن است نیاز به بررسی دقیق داشته باشند تا اطمینان حاصل شود که تمام به‌روزرسانی‌ها به درستی و به طور کارآمد در پارادایم همزمانی مدیریت می‌شوند.

آینده همزمانی در ری‌اکت

سفر ری‌اکت به سوی همزمانی ادامه دارد. تیم به اصلاح زمان‌بند، معرفی APIهای جدید و بهبود تجربه توسعه‌دهنده ادامه می‌دهد. ویژگی‌هایی مانند Offscreen API (که به کامپوننت‌ها اجازه می‌دهد بدون تأثیر بر UI درک شده توسط کاربر رندر شوند، که برای پیش‌رندر یا وظایف پس‌زمینه مفید است) امکانات آنچه با رندرینگ همزمان قابل دستیابی است را بیشتر گسترش می‌دهند.

با پیچیده‌تر شدن وب و افزایش مداوم انتظارات کاربران برای عملکرد و پاسخگویی، رندرینگ همزمان نه تنها به یک بهینه‌سازی بلکه به یک ضرورت برای ساخت اپلیکیشن‌های مدرن و جذابی تبدیل می‌شود که به مخاطبان جهانی خدمات ارائه می‌دهند.

نتیجه‌گیری

حالت همزمانی ری‌اکت و مفهوم اصلی آن یعنی رندرینگ قابل وقفه، نمایانگر یک تکامل قابل توجه در نحوه ساخت رابط‌های کاربری است. با توانمند ساختن ری‌اکت برای توقف، ازسرگیری و اولویت‌بندی وظایف رندرینگ، می‌توانیم اپلیکیشن‌هایی بسازیم که نه تنها عملکرد بالایی دارند، بلکه به طور باورنکردنی پاسخگو و مقاوم هستند، حتی تحت بار سنگین یا در محیط‌های محدود.

برای مخاطبان جهانی، این به معنای یک تجربه کاربری عادلانه‌تر و لذت‌بخش‌تر است. چه کاربران شما از یک اتصال فیبر نوری پرسرعت در اروپا به اپلیکیشن شما دسترسی داشته باشند یا از یک شبکه تلفن همراه در یک کشور در حال توسعه، حالت همزمانی کمک می‌کند تا اطمینان حاصل شود که اپلیکیشن شما سریع و روان احساس می‌شود.

پذیرش ویژگی‌هایی مانند ساسپنس و ترنزیشن‌ها و مهاجرت به Root API جدید، گام‌های حیاتی برای باز کردن پتانسیل کامل ری‌اکت هستند. با درک و به کارگیری این مفاهیم، می‌توانید نسل بعدی اپلیکیشن‌های وب را بسازید که واقعاً کاربران را در سراسر جهان خوشحال می‌کنند.

نکات کلیدی:

• حالت همزمانی ری‌اکت امکان رندرینگ قابل وقفه را فراهم می‌کند و از مسدودسازی همگام رها می‌شود.
• ویژگی‌هایی مانند ساسپنس، دسته‌بندی خودکار و ترنزیشن‌ها بر این پایه همزمانی ساخته شده‌اند.
• از createRoot برای فعال کردن ویژگی‌های همزمانی استفاده کنید.
• به‌روزرسانی‌های غیرفوری را با startTransition شناسایی و علامت‌گذاری کنید.
• رندرینگ همزمان به طور قابل توجهی UX را برای کاربران جهانی، به ویژه در شرایط شبکه و دستگاه‌های متنوع، بهبود می‌بخشد.
• برای عملکرد بهینه، با ویژگی‌های همزمانی در حال تحول ری‌اکت به‌روز بمانید.

از امروز کاوش حالت همزمانی را در پروژه‌های خود آغاز کنید و اپلیکیشن‌هایی سریع‌تر، پاسخگوتر و لذت‌بخش‌تر برای همه بسازید.